<template>
  <div class="container">
    <div class="main">
      <div class="leftside">
        <Leftside></Leftside>
      </div>
      <div class="center">
        <div class="heade">关于我</div>
        <el-card style="width: 800px; min-height: 80vh">
          <h1 style="text-align: center;">欢迎来到我的数字小窝 —— 前端探索之旅</h1>
          <el-divider />
          <h3>关于我</h3>
          <p>我，一名正在成长的前端开发者，自踏入这个行业以来，便深深被前端技术的魅力所吸引。从最初的HTML、CSS基础搭建，到JavaScript的深入探索，再到React、Vue等现代前端框架的熟练运用，每一步都见证了我的成长与蜕变。我热爱学习，不断追求技术的边界，同时也享受将复杂问题简化的过程，用简洁而优雅的代码解决实际问题。</p>
          <el-divider />
          <h3>博客的初衷</h3>
          <p>创建这个博客，初衷很简单：一是为了记录自己的学习历程，将学习过程中的点点滴滴、心得体会记录下来，既是对自己的鞭策，也是对未来自己的一份宝贵回忆；二是希望通过我的分享，能够帮助到那些同样在前端道路上奋斗的朋友，无论是初学者还是有一定基础的开发者，都能在这里找到一些启发和帮助。我相信，技术的力量在于分享，知识的价值在于传递。</p>
          <el-divider />
          <h3>博客内容概览</h3> 
          <p>技术文章：涵盖前端开发的各个方面，包括但不限于HTML5、CSS3、JavaScript、ES6+新特性、前端框架、前端性能优化、响应式设计、前端安全等。我会结合实际项目经验，深入浅出地讲解技术原理和应用场景。</p>
          <p>项目案例：分享我参与或独立完成的前端项目案例，从需求分析、设计思路、技术选型到实现过程，全方位展示项目的诞生过程。希望通过这些案例，能够激发你的灵感，为你的项目开发提供参考。</p>
          <p>技术心得：记录我在技术探索过程中的所思所感，包括遇到的技术难题、解决方案、技术趋势的见解等。这些心得或许能让你在面临相似问题时少走弯路。</p>
          <br>
          <br>
          <h3>结语</h3>
          <p>在这个博客里，我期待着与你一同前行，在前端技术的海洋中乘风破浪，共同探索未知，创造更多可能。无论你是技术大牛还是初学者，这里都有属于你的位置。让我们一起，用代码书写未来，用技术点亮梦想！</p>
        </el-card>
      </div>
      <div class="rightside">
        <RightsideVue :data="articledata"></RightsideVue>
      </div>
    </div>
  </div>
</template>

<script setup>
import Leftside from '@/components/Leftside.vue'
import Listitem from '@/components/Listitem.vue'
import {searchdata} from "../../apis/article";
import RightsideVue from '@/components/Rightside.vue'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router';
const route = useRoute()
onMounted(()=>{
  getarticledata()
})
const articledata = ref([])
const getarticledata = () =>{
  searchdata().then((res)=>{
    if (res.data.isok) {
      articledata.value = res.data.data
      console.log(articledata.value, 'data')
    }
  })
}
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  min-height: 100vh;
  margin-top: 60px;
  background-color: #f5f5ff;
  .main {
    display: flex;
    justify-content: center;
    .center {
      padding: 0 20px;
      .heade{
        height: 50px;
        line-height: 50px;
        background-color: #fff;
        color: #000;
        text-align: center;
        font-size: 24px;
        padding: 10px;
        box-shadow: #303133 0px 0px 5px;;
        margin: 10px 0;
      }
    }
  }
  .time{
    margin-top: 10px;
  }
}
</style>

